<template>
  <div>
    <div class="userbox">
      <img
        class="block-img"
        v-if="userRole == 1"
        src="../assets/img/人事.jpg"
        alt=""
      />
      <img
        class="block-img"
        v-if="userRole == 0"
        src="../assets/img/学生.png"
        alt=""
      />
      <img
        class="block-img"
        v-if="userRole == 2"
        src="../assets/img/管理员.png"
        alt=""
      />
      <span>{{ username }}</span>
      <span style="font-size: 12px">{{
        userRole == 0 ? "学生" : userRole == 1 ? "企业" : "管理员"
      }}</span>
    </div>

    <el-menu
      :default-active="path"
      class="el-menu-vertical-demo"
      background-color="#464646"
      text-color="#fff"
      active-text-color="#41972E"
      @select="handleSelect"
    >
      <el-menu-item index="/">
        <span slot="title">首页</span>
      </el-menu-item>
      <!-- 学生端 -->
      <template v-if="userRole == 0">
        <el-menu-item index="/myinfo">个人信息</el-menu-item>
        <el-menu-item index="/companyCenter">入驻企业</el-menu-item>
        <el-menu-item index="/jobCenter">实习市场</el-menu-item>
        <el-menu-item index="/myDeliver">我的投递</el-menu-item>
      </template>
      <!-- 企业 -->
      <template v-if="userRole == 1">
        <el-menu-item index="/companyinfo">企业信息</el-menu-item>
        <el-menu-item index="/jobform">发布实习岗位</el-menu-item>
        <el-menu-item index="/companyjob">我发布的实习</el-menu-item>
        <el-menu-item index="/recordcenter">我收到的简历</el-menu-item>
        <el-menu-item index="/peocenter">人才市场</el-menu-item>
      </template>

      <!-- 管理员 -->
      <template v-if="userRole == 2">
        <el-menu-item index="/userManagement">用户账号管理</el-menu-item>
        <!-- <el-menu-item index="/infoManagement">资料信息管理</el-menu-item> -->
        <el-menu-item index="/jobsManagement">实习岗位管理</el-menu-item>
        <el-menu-item index="/recordManagement">投递记录查询</el-menu-item>
      </template>
    </el-menu>
    <div class="exit" @click="exitToLogin">退出登录</div>
  </div>
</template>

<script>
import { cookieData, localData } from "@/util/local";
export default {
  name: "menubox",
  data() {
    return {
      path: "/",
      userRole: "",
      username: "",
    };
  },
  methods: {
    handleSelect(index) {
      this.$router.push({ path: index });
    },
    goToPage(index) {
      this.$router.push({ path: "/page" + index });
    },
    exitToLogin() {
      cookieData("clean", "token");
      localData("clean", "userinfo");
      this.$router.push({ path: "/login" });
    },
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        console.log(val);
        this.path = val.fullPath;
        this.$forceUpdate();
      },
      // 深度观察监听
      deep: true,
    },
  },
  created() {
    this.userRole = localData("get", "userinfo").role;
    this.username = localData("get", "userinfo").name;
    console.log(this.$route.fullPath);
    this.path = this.$route.fullPath;
    this.$forceUpdate();
  },
};
</script>

<style>
.userbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  margin: 20px 0;
}
.exit {
  font-size: 12px;
  color: #ffffff;
  width: 200px;
  position: absolute;
  line-height: 40px;
  cursor: pointer;
  bottom: 0;
}
.exit:hover {
  color: #41972e;
}
.block-img {
  margin-bottom: 20px;
  height: 80px;
  width: 80px;
  border-radius: 50em;
}
</style>